<template>
  <div class='top-left'>
    <el-button type="primary" @click="dialogVisible = true" class="rounded-button">点击申请</el-button>

    <el-dialog
      title="奖学金申请表"
      :visible.sync="dialogVisible"
      width="40%"
      :before-close="handleClose"
      class="rounded-dialog">
      <el-form ref="form" :model="form" label-width="100px" :rules="rules">
        <el-form-item label="申请人姓名" prop="name">
          <el-input v-model="fixedName" autocomplete="off" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="申请人年级" prop="grade">
          <el-input v-model="fixedGrade" autocomplete="off" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="申请人学号" prop="studentId">
          <el-input v-model="fixedStudentId" autocomplete="off" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="申请奖学金类型" prop="scholarshipType">
          <el-select v-model="form.scholarshipType" placeholder="请选择申请奖学金类型" style="width: 100%;">
            <el-option label="国家奖学金" value="first"></el-option>
            <el-option label="市级奖学金" value="second"></el-option>
            <el-option label="校级奖学金" value="third"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" :disabled="!form.scholarshipType" @click="submitForm">提 交</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "shengqin",
  data() {
    return {
      dialogVisible: false,
      form: {
        scholarshipType: ''
      },
      rules: {
        scholarshipType: [
          { required: true, message: '请选择申请奖学金类型', trigger: 'change' }
        ]
      },
      fixedName: '麻炳昌', // 设置固定的申请人姓名
      fixedGrade: '研一', // 设置固定的申请人年级
      fixedStudentId: '2022082110' // 设置固定的申请人学号
    };
  },
  methods: {
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {
          return false;
        });
    },
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.$confirm('确认提交申请吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.dialogVisible = false;
            console.log('Form data:', this.form);
            this.$notify({
              title: '成功',
              message: '申请已成功提交',
              type: 'success',
              duration: 2000 // 设置通知显示时间为 2 秒
            });
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消提交'
            });
          });
        } else {
          return false;
        }
      });
    }
  }
};
</script>

<style>
.top-left {
  /* position: relative; */
  top: -10px; /* 向上微调10像素 */
  right: -20px; /* 向右微调10像素 */
}

.rounded-button {
  border-radius: 10px; /* 设置按钮的圆角大小 */
}

.rounded-dialog {
  border-radius: 10px; /* 设置对话框的圆角大小 */
}

.dialog-footer .el-button {
  border-radius: 10px; /* 设置对话框内按钮的圆角大小 */
}
</style>
